<template>
 <!--  <div>
    <div class="my_div" v-for="(item, index) in list" :key="index">
      <img :src="item.dogImgUrl" alt="" />
      <p :style="{ backgroundColor: colorStr }" @click="btn" >
        {{ item.dogName }}
      </p>
    </div>
    
  </div> -->
   <div class="my_div">
    <img
      :src="dogImgUrl"
      alt=""
    />
    <p :style="{ backgroundColor: colorStr }" @click="btn">
      {{dogName}}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorStr: "",
      
    };
  },
  props: ["dogImgUrl", "dogName"],
  /* props: {
    list: {
      required: true,
      type: Array,
    },
  }, */
  methods: {
    btn() {
      this.colorStr = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
        Math.random() * 256
      )}, ${Math.floor(Math.random() * 256)})`;
      this.$emit("name", this.dogName);
    },
  },
};
</script>

<style>
.my_div {
  width: 400px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 550px;
}
.my_div p {
  cursor: pointer;
}
</style>